// pages/notification/notification.js
var sliderWidth = 15 // 需要设置slider的宽度，用于计算中间位置(值为文字导航的红色指示条的宽度)
Page({

  /**
   * 页面的初始数据
   */
  data: {
    activeIndex: 0,//导航指示下标
    navshadow: true, //顶部图文导航显示
    sliderLeft: 0,
    sliderOffset: 0,
    NewBlock_D: false, //1天内的对话
    sevenBefore_D: true, //1天以前对话
    NewBlock_X: false, //1天内的消息
    sevenBefore_X: true, //1天以前消息
    NewBlock_T: false, //7天内的通知
    sevenBefore_T: true, //7天以前通知
    unread: true, //未读
    imgUrl: getApp().globalData.imgUrl,
    startX: 0, //开始坐标
    startY: 0,
    tabs: [
      { name: "对话", sum: '0', img: 'dui', imgA: 'duiA', cssShadow:'duiAshadow'}, 
      { name: "消息", sum: '99+', img: 'xiao', imgA: 'xiaoA', cssShadow: 'xiaoAshadow'}, 
      { name: "通知", sum: '19', img: 'tong', imgA: 'tongA', cssShadow: 'tongshadow'}],
    lists_D: [{
      isTouchMove: false,
      time: '2018.08.17',
      shopLogo:'shoplogo2.png',
      shopName:'小黄人官方企业店',
      dialogue:'弹簧绳内置钢线看的见，扯不断'
    },
    {
      isTouchMove: false,
      time: '2018.08.17',
      shopLogo: 'shoplogo2.png',
      shopName: '小黄人官方企业店',
      dialogue: '弹簧绳内置钢线看的见，扯不断'
    },
    {
      isTouchMove: false,
      time: '2018.08.17',
      shopLogo: 'shoplogo1.png',
      shopName: '阿迪达斯旗舰店',
      dialogue: '抱歉哈亲，订单比较多，下单后大概2-5天安排左右发...'
    }],  
    lists_X: [{
      isTouchMove: false,
      time: '2018.08.17 12:30',
      type: '升级提醒',
      title: '全新苹果起步价惊掉下巴：快看看多少钱！',
      color: 'red',
      goods:false
      }, 
      {
        isTouchMove: false,
        time: '2018.08.17 12:30',
        type: '签收提醒',
        title: '您已经签收订单商品',
        color: 'green',
        goods: true,
        goods_img: 'qdi.jpg',
        goods_code: '12365478963',
        goods_name: '纯色简约套头淑女针织毛衣' 
      },
      {
        isTouchMove: false,
        time: '2018.08.17 12:30',
        type: '签收提醒',
        title: '标题',
        color: 'green',
        goods: true,
        goods_img: 'qdi.jpg',
        goods_code:'12365478963',
        goods_name:'纯色简约套头淑女针织毛衣' 
      }],
    lists_T: [{
        isTouchMove:false,
        time: '2018.08.17 12:30',
        shop: '华为旗舰店',
        title: '标题',
        info: '内容简介'
      },
      { 
        isTouchMove: false,
        time: '2018.08.17 12:31',
        shop: '苹果旗舰店',
        title: '标题',
        info: '内容简介'
      },
      {
        isTouchMove: false,
        time: '2018.08.17 12:32',
        shop: '苹果旗舰店',
        title: '全新苹果起步价惊掉下巴：快看看多少钱！',
        info: '今日，我们从吉利汽车官方获得了其旗下缤越运动版车型的官方图新车首次采用了吉利黑色logo，并且在吉利并且在吉利并且在吉利并且在吉利并且在吉利'
      },
      {
        isTouchMove: false,
        time: '2018.08.17 12:33',
        shop: '苹果旗舰店',
        title: '标题',
        info: '内容简介'
      },
      {
        isTouchMove: false,
        time: '2018.08.17 12:34',
        shop: '苹果旗舰店',
        title: '标题',
        info: '内容简介'
      },
      {
        isTouchMove: false,
        time: '2018.08.17 12:34',
        shop: '苹果旗舰店',
        title: '标题',
        info: '内容简介'
      },
      {
        isTouchMove: false,
        time: '2018.08.17 12:34',
        shop: '苹果旗舰店',
        title: '标题',
        info: '内容简介'
      },
      {
        isTouchMove: false,
        time: '2018.08.17 12:34',
        shop: '苹果旗舰店',
        title: '标题',
        info: '内容简介'
      },
      {
        isTouchMove: false,
        time: '2018.08.17 12:34',
        shop: '苹果旗舰店',
        title: '标题',
        info: '内容简介'
      },
    ],
  },
  tabCss: function(e) {
    this.setData({
      activeIndex: e.currentTarget.id,
      sliderOffset: wx.getSystemInfoSync().windowWidth / 3 * (parseInt(e.currentTarget.id)),
    })
  },
  //清空弹窗
  openempty: function() {
    wx.showModal({
      title: '',
      content: '\n是否清空1天前的所有消息？\n',
      confirmText: "取消",
      cancelText: "清空",
      cancelColor: "#f8584f",
      confirmColor: "#9f9f9f",
      success: function(res) {
        if (res.confirm) {
          console.log('取消操作')
        } else {
          console.log('清空操作')
        }
      }
    });
  },
  //文字切换
  tabNav: function(e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
  },
  //页面滚动监听
  scrollChang: function(e) {
    if (e.detail.scrollTop > 89) {
      this.setData({
        navshadow: false,
      })
    } else {
      this.setData({
        navshadow: true,
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    wx.getSystemInfo({ //渲染文字导航
      success: function(res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  //通知的左滑删除
  touchS_T: function (e){
    let datalist = this.touchstart(e, this.data.lists_T)
    this.setData({ lists_T: datalist })
  },
  touchM_T:function(e){
    let datalist = this.touchmove(e, this.data.lists_T)
    this.setData({ lists_T: datalist })
  },
  del_T: function (e) {
    let datalist = this.delect(e, this.data.lists_T)
    this.setData({ lists_T: datalist })
  },
  //消息的左滑删除
  touchS_X: function (e) {
    let datalist = this.touchstart(e, this.data.lists_X)
    this.setData({ lists_X: datalist })
  },
  touchM_X: function (e) {
    let datalist = this.touchmove(e, this.data.lists_X)
    this.setData({ lists_X: datalist })
  },
  del_X: function (e) {
    let datalist = this.delect(e, this.data.lists_X)
    this.setData({ lists_X: datalist })
  },
  //对话的左滑删除
  touchS_D: function (e) {
    let datalist = this.touchstart(e, this.data.lists_D)
    this.setData({ lists_D: datalist })
  },
  touchM_D: function (e) {
    let datalist = this.touchmove(e, this.data.lists_D)
    this.setData({ lists_D: datalist })
  },
  del_D: function (e) {
    let datalist = this.delect(e, this.data.lists_D)
    this.setData({ lists_D: datalist })
  },



  //手指触摸动作开始 记录起点X坐标
  touchstart: function (e,DataSource) {
    //开始触摸时 重置所有删除
    DataSource.forEach(function (v, i) {
      if (v.isTouchMove)//只操作为true的
        v.isTouchMove = false;
    })
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
    })
    return DataSource
  },
  //滑动事件处理
  touchmove: function (e, DataSource) {
    var that = this,
      index = e.currentTarget.dataset.index,//当前索引
      startX = that.data.startX,//开始X坐标
      startY = that.data.startY,//开始Y坐标
      touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
      //获取滑动角度
      angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
      DataSource.forEach(function (v, i) {
      v.isTouchMove = false
      //滑动超过30度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) //右滑
          v.isTouchMove = false
        else //左滑
          v.isTouchMove = true
      }
    })
    //更新数据
    return DataSource
  },
  /**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  //删除事件
  delect: function (e, DataSource) {
    DataSource.splice(e.currentTarget.dataset.index, 1)
    return DataSource
  }
})